<template>
    <!-- 搜索查找 -->
    <div class="user-header">
        <el-button @click="dialogVisible = true" type="primary">新增</el-button>
        <el-form :inline="true" :model="formInline" class="demo-form">
            <el-form-item>
                <el-input v-model="formInline.keyword" placeholder="请输入用户名" clearable></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="handelSearch">搜索</el-button>
            </el-form-item>
        </el-form>
    </div>
    <div class="table-box">
        <el-table :data="list" style="width: 100%;" height="500px">
            <el-table-column v-for="item in tableLabel" :key="item.prop" :prop="item.prop" :label="item.label"
                :width="item.width ? item.width : 125" />
            <!-- 自定义操作 -->
            <el-table-column label="操作">
                <template #default="scope">
                    <el-button size="small">
                        编辑
                    </el-button>
                    <el-button size="small" type="danger">
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页器 -->
        <el-pagination layout="prev, pager, next" :total="config.total" @current-change="chagePage" />
    </div>
    <!-- 对话框 -->
    <el-dialog v-model="dialogVisible" title="新增" width="500" :before-close="handleClose">
        <!-- 新增的表单 -->
        <el-form :inline="true" :model="formUser" class="demo-form-inline">
            <el-row>
                <el-col :span="12">
                    <el-form-item label="姓名" prop="name" :rules="[{
                        required: true,
                        message: '姓名是必填项！',
                    }]">
                        <el-input v-model="formUser.name" placeholder="请输入姓名" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="年龄" prop="age" :rules="[
                        {
                            required: true,
                            message: '年龄是必填项！',
                        },
                        {
                            type: 'number',
                            message: '年龄必须是数字！',
                        }
                    ]">
                        <el-input v-model="formUser.age" placeholder="请输入年龄" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-form-item label="Approved by">
                <el-input v-model="formUser.user" placeholder="Approved by" clearable />
            </el-form-item>
            <el-form-item label="Activity zone">
                <el-select v-model="formUser.region" placeholder="Activity zone" clearable>
                    <el-option label="Zone one" value="shanghai" />
                    <el-option label="Zone two" value="beijing" />
                </el-select>
            </el-form-item>
            <el-form-item label="Activity time">
                <el-date-picker v-model="formUser.date" type="date" placeholder="Pick a date" clearable />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">Query</el-button>
            </el-form-item>
        </el-form>


        <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="dialogVisible = false">
                    确定
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup>

import { ref, getCurrentInstance, onMounted, reactive } from 'vue';

const { proxy } = getCurrentInstance()

// 用户表格数据
let list = ref([])
const tableLabel = reactive([
    {
        prop: 'name',
        label: '姓名'
    },
    {
        prop: 'age',
        label: '年龄'
    },
    {
        prop: 'sexlabel',
        label: '性别'
    },
    {
        prop: 'birth',
        label: '出生日期',
        width: 200
    },
    {
        prop: 'addr',
        label: '地址',
        width: 300
    },
])
// 分页数据
const config = reactive({
    total: 0,
    page: 1,
    name: ''
})
// 页码数发生变化时
const chagePage = (page) => {
    console.log(page);
    config.page = page
    getUserData(config)
}

// 搜索关键词
const formInline = reactive({
    keyword: ''
})
// 搜索功能
const handelSearch = () => {
    config.name = formInline.keyword
    getUserData(config)
}
// 对话框的显示或隐藏
const dialogVisible = ref(false)

const handleClose = (done) => {
    ElMessageBox.confirm('确定要关闭吗?')
        .then(() => {
            done()
        })
        .catch(() => {
            // catch error
        })
}

// 添加用户的form数据
const formUser = reactive({
    name: '',
    age: '',
    sex: '',
    birth: '',
    addr: ''
})

// 获取表格数据
const getUserData = async (config) => {
    let res = await proxy.$api.getUserData(config)
    config.total = res.count
    // console.log(res);
    list.value = res.list.map((item) => {
        item.sexlabel = item.sex === 0 ? '男' : '女'
        return item
    })
}
onMounted(() => {
    // 获取表格数据
    getUserData(config)
})


</script>

<style lang="less">
.user-header {
    display: flex;
    justify-content: space-between;
}
</style>